<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #outer{
            border: 1px solid green;
            width: 700px;
            height: 500px;
            margin: auto;
            padding-top: 20px;
        }
        table{
            margin: auto;
        }
       table,th,td{
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
        th,td{
            width: 120px;
            height: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="outer">
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox"></th>
                    <th>序号</th>
                    <th>商品名称</th>
                    <th>单价</th>
                    <th>购买数量</th>
                </tr>
            </thead>
            <tbody>
                <tr class="c">
                    <td><input type="checkbox"></td>
                    <td>1001</td>
                    <td>iphone16</td>
                    <td>4999.99</td>
                    <td>3</td>
                </tr>
                <tr class="c">
                    <td><input type="checkbox"></td>
                    <td>1002</td>
                    <td>iphone15</td>
                    <td>3999.99</td>
                    <td>10</td>
                </tr>
                <tr class="c">
                    <td><input type="checkbox"></td>
                    <td>1003</td>
                    <td>iphone14</td>
                    <td>4999</td>
                    <td>5</td>
                </tr>
                <tr class="c">
                    <td><input type="checkbox"></td>
                    <td>1004</td>
                    <td>iphone13</td>
                    <td>2000</td>
                    <td>5</td>
                </tr>
                <tr class="c">
                    <td><input type="checkbox"></td>
                    <td>1005</td>
                    <td>iphone12</td>
                    <td>3500</td>
                    <td>3</td>
                </tr>
            </tbody>
            <tfoot>
                <tr><td colspan="5">
                    <span style="color: red;font-size: 20px;">总价:<span id = "yuan">0元</span></span>
                </td></tr>
            </tfoot>
        </table>
        <button onclick="add()">计算</button>
    </div>
    <script>
        
        function add(){
            let sum = 0;
            let goods = document.getElementsByClassName("c");
            // console.log(goods[1].children[0].children[0].checked);
            // console.log(goods[0].children[3])
            for(let i = 0; i < goods.length; i++){
                if(goods[i].children[0].children[0].checked){
                    // let td = document.querySelector("td");
                    // let num = parseInt(td.innerText, 10); 

                    let td1 = goods[i].children[3];  // <td>价格</td>
                    let td2 = goods[i].children[4];  // <td>数量</td>

                    let num1 = parseFloat(td1.innerText);  // 价格
                    let num2 = parseFloat(td2.innerText);  // 数量

                    let x = num1*num2;
                    sum += x;
                }
            }
            document.getElementById("yuan").innerText = sum.toFixed(2) + " 元";
        }
        let n1 = parseFloat('15.555');
        let n2 = parseInt('2');
        console.log(n1*n2)
    </script>
</body>
</html>